<template>
  <div class="app-container">
    <el-page-header title="返回列表" @back="goBack"/>
    <!-- 订单详情 -->
    <div class="order-info">
      <el-col v-if="purchaseStoreOrder.orderReturnState == '2'"><div class="bg-red" style="padding-bottom: 10px;padding-left: 50px;">驳回理由：{{ purchaseStoreOrder.auditComment }}</div></el-col>
      <el-card v-loading="orderInfoLoading" class="box-card">
        <el-row>
          <el-col :span="10" :offset="2">单据编号：{{ purchaseStoreOrder.orderNo }}</el-col>
          <el-col :span="10" :offset="2">状&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;态：{{ purchaseStoreOrder.orderReturnState | formatStatus }}</el-col>
        </el-row>
        <el-row>
          <el-col :span="10" :offset="2">仓&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;库：{{ purchaseStoreOrder.warehouseName }}</el-col>
          <el-col :span="10" :offset="2">创建时间：{{ purchaseStoreOrder.gmtCreate | formatDateAndTime }}</el-col>
        </el-row>
        <el-row>
          <el-col :span="10" :offset="2">操&nbsp;&nbsp;作&nbsp;&nbsp;人：{{ purchaseStoreOrder.adminRealname }}</el-col>
          <el-col :span="10" :offset="2">备&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;注：{{ purchaseStoreOrder.orderReturnInfo }}</el-col>
        </el-row>
      </el-card>
    </div>
    <!-- 退库详情 -->
    <div class="p-order-goods-info" >
      <el-col :span="6">退库客户：{{ purchaseStoreOrder.customerName }}</el-col>
      <el-col :span="6">退库总数：{{ purchaseStoreOrder.orderGoodsReturnCount }}</el-col>
      <el-col :span="6">退库总额：{{ purchaseStoreOrder.orderReturnAmount }}</el-col>
      <div class="p-order-goods-list">
        <el-table
          v-loading="pOrderGoodsLoading"
          :data="pOrderGoodsList"
          size="small"
          element-loading-text="正在查询中。。。"
          border
          fit
          highlight-current-row
          style="white-space: pre-line;"
        >
          <el-table-column align="center" label="商品" prop="goodsName" width="200px" style="display: inline-block;">
            <template slot-scope="scope">
              <el-col :span="6"><img :src="scope.row.goodsImg + '?x-oss-process=style/100px'" width="40" ></el-col>
              <el-col :span="18" style="padding-top: 15px;">{{ scope.row.spuName + '' + scope.row.skuName }}</el-col>
            </template>
          </el-table-column>
          <el-table-column prop="goodsUnit" align="center" label="单位"/>
          <el-table-column align="center" label="条形码" prop="barCode" />
          <el-table-column align="center" label="退库数量" prop="goodsReturnNum" />
          <el-table-column align="center" label="退库单价" >
            <template slot-scope="scope">
              <el-col>{{ scope.row.goodsPrice.toFixed(2) }}</el-col>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </div>
    <!-- 操作日志 -->
    <div class="p-order-log" >
      <el-col :span="4"><div >操作日志</div></el-col>
      <div class="p-order-goods-list">
        <el-table
          v-loading="pOrderLogsLoading"
          :data="pOrderLogsList"
          size="small"
          element-loading-text="正在查询中。。。"
          border
          fit
          highlight-current-row
          style="white-space: pre-line;"
        >
          <el-table-column align="center" label="操作时间" width="200" >
            <template slot-scope="scope">
              {{ scope.row.gmtCreate | formatDateAndTime }}
            </template>
          </el-table-column>
          <el-table-column align="center" label="操作人" prop="operUser" />
          <el-table-column align="center" label="状态" >
            <template slot-scope="scope">
              {{ scope.row.status | formatStatus }}
            </template>
          </el-table-column>
        </el-table>
      </div>
    </div>
  </div>
</template>

<style>
  .bg-red {
    color: #F56C6C;
  }
  .order-info .el-row {
    margin-bottom: 20px;
  }
  .p-order-goods-info {
    margin-top: 20px;
    margin-bottom: 20px;
  }
  .p-order-goods-list{
    padding-top: 40px;
  }
  .p-order-log{

  }

</style>
<script>
import { detail } from '@/api/purchasereturnorder'
import { formatDateAndTime } from '@/filters'

export default {
  name: 'PurchaseStoreDetail',
  components: {},
  filters: {
    formatGmt(time) {
      if (time == null || time === '') {
        return '无'
      }
      return formatDateAndTime(time)
    },
    formatStatus(status) {
      if (status === 1) {
        return '已通过'
      } else if (status === 0) {
        return '待审核'
      } else if (status === 2) {
        return '驳回'
      }
    }
  },
  data() {
    return {
      purchaseStoreOrder: {
        id: this.$route.query.pOrderId
      },
      purchaseStoreOrderId: this.$route.query.pOrderId,
      pOrderGoodsLoading: true,
      pOrderGoodsList: [],
      pOrderLogsLoading: true,
      pOrderLogsList: [],
      orderInfoLoading: true
    }
  },
  created() {
    this.orderDetail()
  },
  methods: {
    orderDetail() {
      this.pOrderGoodsLoading = true
      this.pOrderLogsLoading = true
      this.orderInfoLoading = true
      detail(this.purchaseStoreOrder).then(response => {
        this.purchaseStoreOrder = response.data.data
        this.pOrderGoodsLoading = false
        this.pOrderLogsLoading = false
        this.orderInfoLoading = false
        this.pOrderGoodsList = this.purchaseStoreOrder.purchaseOrderReturnGoods
        this.pOrderLogsList = this.purchaseStoreOrder.returnOperLogs
      }).catch(response => {
        this.pOrderGoodsLoading = false
        this.pOrderLogsLoading = false
        this.orderInfoLoading = false
        this.$notify.error({
          title: '失败',
          message: '没有此入库单'
        })
      })
    },
    goBackList() {
      this.$router.push({ path: '/warehouse/purchaseOrder' })
    },
    goBack() {
      this.$store.dispatch('delView', this.$route)
      this.$router.back(-1)
    }
  }
}
</script>
